<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <h3> Local Video </h3>
  <video id="localVideo" width="160" height="120" autoplay muted></video> <br />

  <h3> Remote Video </h3>
  <div id="remoteVideos"></div> <br />

  <h3> Logs </h3>
  <div id="logs"></div>


</body>

<script>
  const pc = new RTCPeerConnection({
    iceServers: [{
      urls: 'stun:stun.l.google.com:19302'
    }]
  })
  pc.addTransceiver('video', {
    direction: 'sendrecv'
  })
  pc.addTransceiver('audio', {
		direction: 'sendrecv'
	})

  pc.onicecandidate = e => {
    console.log(e.candidate)
    document.getElementById('logs').innerHTML += JSON.stringify(e.candidate) + '<br>'
    if (!e.candidate) {
      return
    }
  }

  pc.createOffer().then(offer => {
    pc.setLocalDescription(offer)
    console.log("offer:\r\n")
    console.log(offer)
  })

</script>

</html>